<!DOCTYPE HTML>
<html>
  <head>
    <title> Overheard 
    {% if section %}    
      | {{ section }}
    {% endif %}
    </title>
      <style type="text/css">      
      * { 
        margin: 0; 
        padding: 0; 
        line-height: 1.1em;
        font-family: Helvetica, FreeSans, Arial, 'Bitstream Vera Sans', sans-serif;
      }
      .login { text-align: right; clear: both; color: black }
      h1 { padding: 0.2em 0; }
      h1 a { color: white }
      h2 { padding-left: 1em }
      .titlebar { color: white; background: black; padding-left: 1em; }
      .tidbits {  margin-left: 3em;  }
      .tidbit { padding: 2em;  }
      .tidbit a { color: black }
      .submit_tidbit { margin: 2em; }
      .submit_tidbit p { padding: 0.2em; }
      .votecontrols { float: left }
      .quoteid { display:none }
      .del { padding-right: 1em }
      .error { color: red; font-weight: bold }
      .gamehint { display: none; background: yellow; color: black; }
      .next { padding-left: 3em; padding-top: 1em; }
      .nav { margin-left: 2em; margin-right: -1em;  }
      .nav a { color: white; padding: 0.3em; border: solid white 2px; text-decoration: none; }
      .{{ section }} a { color: black; background: white; font-weight: bold }
      .voteup, .votedown { vertical-align: middle; cursor: pointer }
      .index { padding-right: 1em; }
      .quote { width: 100%; padding: 1em }
      .quoteinfo { padding: 1em; padding-left: 2em; }
      .quoteinfo th { text-align: right }
      .quoteinfo th, .quoteinfo td { padding: 0.5em }
      .loginwarning { font-weight: bold; background: yellow; display: none; padding-left: 2em; }
    </style>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script src="/js/vote.js"></script>
    <link rel="alternate" type="application/atom+xml" href="/feed/popular/" title="Popular Quotes">
    <link rel="alternate" type="application/atom+xml" href="/feed/recent/" title="Recent Quotes">
  </head>
  <body>

    <div class="titlebar" >
    <h1><a href="/">Overheard</a></h1> 
    <p>Funny quotes you've heard 
       <span class="nav Popular"><a href="/">popular</a></span> 
       <span class="nav Recent"><a href="/recent/">recent</a></span></p>
    </div>
    <div class="login" >
      {{ greeting }} <br/>
      <img title="Can you get all the stars?" src="/images/progress{{ progress_id }}.png"/><br/>
      <span class="gamehint">{{ progress_msg }}</span><br/>
    </div>   
    
    <p class="loginwarning">You must be logged in to vote.</p>   

  
    {% block body %}
    {% endblock %}
        
    

  </body>
</html> 
